import { defineComponent, ref } from 'vue';
import { addshangbiao, getshangbiaoList, updateGoods, delshangbiao, getchaxun, updatestate } from '@/api/shangbiao';
// 图标下载了引用 然后定义一个局部的注册组件
import {
  Refresh,
  Plus,
  Search,
  Delete,
  Edit,
  WarningFilled,
  DArrowRight,
  Memo,
  View,
  List,
} from '@element-plus/icons-vue';

// 时间
import { dayjs, ElMessageBox, ElMessage } from 'element-plus';
// 删除
import type { Action } from 'element-plus';
import axios from 'axios';

// 图标
export default defineComponent({
  components: {
    Refresh,
    Plus,
    Search,
    Edit,
    Delete,
    WarningFilled,
    DArrowRight,
    Memo,
    View,
    List,
  },
  data() {
    return {
      // 取消按钮
      quxiao: false,
      // 启动弹窗
      qidong: false,
      // 禁用弹窗
      jinyong: false,
      // 查询字段名要单拿出来
      state: null,
      // 弹窗
      showAddDialog: false,
      // 状态
      value2: false,
      // 编辑
      showbianji: false,
      // 图片 表格可以直接绑定当前位置绑定一个v-model就可以渲染了
      fileList: [],
      // 分类
      shangbiao: {
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: 1, // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: 1, // 状态
        creationTime: '', // 创建时间
        tiem1: '', // 时分秒
        turnoverTime: '', // 更新时间
        tiem2: '', // 时分秒
        radio: '', // 单选
        bei: '', // 备注
      },
      // 编辑商品
      editGoods: {
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: 1, // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        creationTime: '', // 创建时间
        tiem1: '', // 时分秒
        turnoverTime: '', // 更新时间
        tiem2: '', // 时分秒
        radio: '', // 单选
        bei: '', // 备注
      },
      //修改状态
       // 编辑商品
       editstate: {
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: 1, // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        creationTime: '', // 创建时间
        tiem1: '', // 时分秒
        turnoverTime: '', // 更新时间
        tiem2: '', // 时分秒
        radio: '', // 单选
        bei: '', // 备注
      },
      // 表单
      showform: {
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: 1, // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        creationTime: '', // 创建时间
        tiem1: '', // 时分秒
        turnoverTime: '', // 更新时间
        tiem2: '', // 时分秒
        radio: '', // 单选
        bei: '', // 备注
      },

      // 清除表单
      list: [],
      limit: 10, // 一页几个数据
      page: 1, // 页数
      total: 1, // 总数设置为一个数字就可以得到总数量
      // 字段的验证 required 必填
      rules: {
        name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
      },
    };
  },
  // 显示列表 显示查询
  mounted() {
    this.getList();
    this.chaxun();
  },
  // 点击事件
  methods: {
    // 修改信息
    openEdit(row: any) {
      console.log('row', row);
      this.editGoods = row;
      // 让弹窗显示
      this.showbianji = true;
      // 编辑显示图片
      this.fileList = [{
        name: row.img.split('.').pop(),
        url: row.img,
      }];
       },
    // 修改确定按钮
    async handleEidt() {
      // 打印出表中所有的内容
      console.log('bianji', this.editGoods);
      const { id, ...postdata } = this.editGoods;
      const res = await updateGoods(id, postdata);
      console.log('res', res);
      const { status } = res;
      if (status === 200) {
        this.$message.success('修改成功');
        this.showbianji = false;
        this.getList();
      } else {
        this.$message.warning('修改失败');
      }
    },
    // 添加
    async handleAdd() {
      // 打印表里面的内容
      console.log('shangbiao', this.shangbiao);
      // 获取到的就是form 组件的是方法 在form添加 ref="addfrom" 然后获取this.$refs.addfrom
      console.log('addfrom', this.$refs.addfrom);
      // 表单的验证 返回是一个异步 await 等到的就是当前内容.方法运行
      try {
        const validateRes = await (this.$refs.addfrom as any).validate();
        const res = await addshangbiao(this.shangbiao);
        console.log('validateRes', validateRes);
        console.log('res', res);
        const { status } = res;
        if (status === 201) {
          this.$message.success('添加成功');
          // 关闭弹窗
          this.showAddDialog = false;
          // 从新获取列表
          this.getList();
        } else {
          this.$message.warning('添加失败');
        }
      } catch (e) {
        this.$message.warning('请按要求检查表单内容');
      }
    },
    // 获取列表
    async getList() {
      const $skip = (this.page - 1) * this.limit;
      const res = await getshangbiaoList({
        $skip,
        $limit: this.limit,
      });
      console.log('获取列表的结果', res);
      this.list = res.data.data;
      this.total = res.data.total;
    },
    // 商品所属
    showsort(val: number | string) {
      val = Number(val);
      if (val === 1) return '公共商品';
      if (val === 2) return '海口解放路店';
      if (val === 3) return '海口永万路店';
      if (val === 4) return '海口长彤路店';
      if (val === 5) return '海口国库路店';
      if (val === 6) return '海口国贸路店';
      if (val === 7) return '海口海甸岛店';
      return '海口解放路店';
    },
    // 时间的设置
    formatTime(time: string) {
      return dayjs(time).add(20, 'hour').format('YYYY-MM-DD HH:mm:ss');
    },
    // 删除
    handleDel(id: number) {
      // 删除的操作一般需要二次确认 避免用户误操作
      ElMessageBox.alert('删除？确定?不后悔？', '想清楚了没', {
        confirmButtonText: 'OK',
        callback: async (action: Action) => {
          if (action === 'cancel') return false;
          const res = await delshangbiao(id);
          console.log('真正的去执行删除', res);
          if (res.status === 200) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.warning('删除失败');
          }
          return true;
        },
      });
    },
    // 图片
    // 上传的对象
    handleUpload(options: any) {
      // 实际工作当中我们更多的是自己去执行上传的具体操作 因为上传前我们还有可以需要进行压缩操作等
    //  打印查看里面的属性
      console.log('options', options);
      // options.file就是我们要上传的文件对象
      // FormData 表格类型阿贾克斯上传文件 先new 一个表格类型
      const formdata = new FormData();
      // 在调用一个方法 formdata.append 添加
      formdata.append('file', options.file); // 实践当中对于这个file对象一般还需要进行压缩处理等
      formdata.append('type', 'qf2302');
      // 引入接口上传
      // 返回一个promise对像
      return axios.post('http://www.wzsqyg.com/attachment/upload', formdata);
    },
    // 上传前的约束 自动上传
    // rawFilez 组件带的 ：类型 boolean组件要求要返回return
    beforeAvatarUpload(rawFile: any): boolean {
      // 获取的是组件中的属性值
      // 可以获取大小，名称，类型
      console.log('rawFile', rawFile);
      // 使用上传之前的钩子我们可以对于上传的文件进行检测或者大小的判断 方法点属性
      // includes 意为包含 image 图片
      // 上传类型不是图片就停止上传
      if (!rawFile.type.includes('image')) {
        this.$message.warning('只能上传图片文件');
        return false;
      }
      // 大小要转换一下 最初为bit
      //  兆 kb bit
      const min = 0.001 * 1024 * 1024;
      if (rawFile.size < min) {
        // warning 警告
        this.$message.warning('上传的图片不能小于0.2m');
        //  若返回false或者返回 Promise 且被 reject，则停止上传 组件是规定
        return false;
      }
      return true;
    },
    // respons 回调一个地址
     UploadOk(response: any) {
      console.log('response', response);
      // 将返回的值 等于商品表里面的封面
      this.shangbiao.img = response.msg;
    },
     // respons 回调一个地址 改变编辑图片的地址
     bianUploadOk(response: any) {
      console.log('response', response);
      // 将返回的值 等于商品表里面的封面
      this.editGoods.img = response.data.msg;
    },
    // 分页
    // 条数
    handeSizeChange(val: number) {
      console.log('val', val);
      this.limit = val;
      this.getList();
    },
    // 页数
    handlePageChange(val: number) {
      this.page = val;
      this.getList();
    },
   // 查询
   async chaxun() {
    console.log('231');
    const $skip = (this.page - 1) * this.limit;
    // 根据查询的字段名
    const chastate1 = this.state;
    const res = await getchaxun({
      $limit: this.limit,
      $skip,
      name: null,
      state: chastate1,
    });
    this.list = res.data.data;
    this.total = res.data.total;
  },
   //修改状态
   changestate(row: any, val: number, id: number) {
    console.log('state', val);
    if (!val) {
      console.log('启动');
      ElMessageBox.confirm(
        `确定启用"${row.name}"吗？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(async () => {
          console.log('点击了确认');
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 1;
          // 修改状态
          await updatestate(id, postdata);
          // 从新获取列表
          this.getList();
          // 提示信息
          ElMessage({
            type: 'success',
            message: '启用成功',
          });
        }).catch(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 0;
          await updatestate(id, postdata);
          this.getList();
        });
    } else {
      console.log('关闭');
      ElMessageBox.confirm(
        `确定禁用"${row.name}"吗？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          // 状态是值是否为选中
          postdata.state = 0;
          // 修改信息
          await updatestate(id, postdata);
          // 从新获取
          this.getList();
          // 提示信息
          ElMessage({
            type: 'success',
            message: '禁用成功',
          });
        }).catch(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 1;
          await updatestate(id, postdata);
          this.getList();
        });
    }
  },
  },
});
